<template>
  <div>
    <el-row>
      <el-col
          v-for="(food, index) in foodList"
          :key="food.id"
          :span="8"
          :offset="index > 0 ? 2 : 0"
      >
        <el-card :body-style="{ padding: '0px' }" >
          <div class="img-wrap">
            <img
                :src="food.image"
                class="image"
            />
          </div>

          <div style="padding: 12px">
            <p>{{food.name}}</p>
            <div class="bottom">
<!--              <time class="time">{{food.desc}}</time>-->
              <div>
                <el-tag size="small" class="button">数量: {{food.number}}</el-tag>
                <el-tag size="small" class="button" type="danger">价格: {{food.price}}</el-tag>
              </div>

            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose} from 'vue'

const props = defineProps({
  foodList: {
    type: Array,
    default: [{
      category_id: 6,
      create_at: "2023-05-05 23:57:23",
      desc: "减脂三明治",
      id: 13,
      image: "http://127.0.0.1:5010/api/m/images/三明治套餐-b91a1913-6e08-4355-a4a9-abb400c154b9.jpg",
      name: "三明治套餐",
      price: 25,
    }]
  }
})

console.log(props.foodList)
const emit = defineEmits([])

defineExpose({})
</script>

<style scoped lang='less'>
.el-col{
  padding: 6px;
  margin-left: unset;
  max-width: 20%
}

.time{
  padding-right: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  color: #999;
}

.bottom{
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.buttob{
  margin-left: 5px;
}

.img-wrap {
  position: relative;
  width: 100%;
  height: 0px;
  padding-top: 100%; // padding-bottom都可以
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>